<template>
	<div class="header">
		<img src="@/assets/img/mobile/logo.png" class="logo" />
			<ul class="menus">
			<li>
				<router-link to="/mobile/home">推荐</router-link>
			</li>
			<li>
				<router-link to="/mobile/bookslist">书库</router-link>
			</li>
			<li>
				<router-link to="/mobile/melist">我的</router-link>
			</li>
		</ul>
		
		<div class="search" @click="goSearch()">
		<img src="@/assets/img/mobile/search.png" />
		</div>
		
	</div>
</template>

<script>
	export default{
		name:'MobileHeader',
		data(){
			return{
			
			}
		},
		methods:{
			goSearch(){
				this.$router.push('/mobile/search')
			}
		}
	}
</script>

<style scoped>
	.header{
		width: 100%;
		height: 3.8rem;
		background-color: #242a38;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		top: 0;
		z-index: 10;
	}
	.header .logo{
		margin-left: 0.5rem;
	}
	.header .menus{
		margin: 0;
		padding: 0;
		list-style: none;
		width: 55%;
		height: 100%;
		color: white;
		/* 菜单中默认显示,动画开始的时候,设置为隐藏状态 */
		display: block;
	}
	.header .menus li a{
		display: block;
		width: 33.33%;
		float: left;
		height: 3rem;
		line-height: 3.5rem;
		text-align: center;
		color: #626e81;
		font-size: 1.4rem;
	}
	.header .menus li .router-link-active{
		border-bottom: 0.3rem solid #f54b65;
		color: white;
	}
	/* position: relative; 定位的元素保留原本的位置 */
	/* position: absolute;  定位的元素抛弃原来的位置,被其他标签顶替 */
	.header .search{
	/* 	position: relative;
		right: 0.5rem; */
		/* 默认div标签没有宽度,动画开始时,设置18.2rem的宽度 */
		width: 2rem;
		height: 2rem;
		border-radius: 50%;
		border: 1px solid white;
		margin-right: 0.5rem;
		display: flex;
		
		/* 水平垂直剧中 */
		align-items: center;
		justify-content: center;
	}
/* 	
	
	
	.header .search form{
		/* 默认白色背景去掉 动画开始时,设置白色背景 */
	/* 	background-color: unset;
		border-radius: 4.5rem;
		height: 2rem;
		overflow: hidden;
	}
	.header .search form input{
		height: 1.9rem;
		outline: none;
		text-indent: 0.3em;
		position: absolute;
		z-index: 10;
		border-radius: 4.5rem;
		border: none; */
		/* 输入框默认隐藏 */
	/* 	display: none;
	}
	.header .search form aside{
		background-color: #2c2d2f;
		width: 1.8rem;
		height: 1.8rem;
		border-radius: 50%;
		float: right;
		text-align: center;
		line-height: 1.8rem;
		border: 0.1rem solid white;
	} */
	/* :hover是电脑PC端的事件:事件:手指事件/手势事件touch */
	/* :hover属于PC端的鼠标操作,不适合在移动端运行 */
	/* .header .search:hover{ */
		/* animation动画,名字,时长,速度 */
		/* animation: formWidth 1s linear; */
	/* } */
	/* 动画效果将form标签的宽度从2rem————>16rem */
/* 	@keyframes formWidth{
		/* 宽度从2rem开始 */
/* 		0%{
			width: 2rem;
		}
		/* 到16rem结束 */
	/* 	100%{
			width: 20rem;
		}
	} */
</style>
